<style scoped>
    .select-box{height:100%;}
    .select-box select{border:0;height:100%;position:absolute;top:0;right:10px;min-width:200px;opacity:0;}
</style>
<template>
    <div class="select-box flex flex-center">
        <span :class="['font-15',value==option[0].value?'grey-9':'']">{{value | valueToText(option)}}</span>
        <select ref="select" :value="value" @change="updateValue($event.target.value)">
            <option :value="a.value" v-for="a in option">{{a.text}}</option>
        </select>
        <i class="fa fa-angle-right grey-9" style="font-size:24px;margin-left:5px;" aria-hidden="true"></i>
    </div>
</template>
<script>
    export default {
      props: {
        value: {
          type: [Number, String],
          default: [0, '']
        },
        option: {
          type: [Array],
          default: []
        }
      },
      filters: {
        valueToText (value, array) {
          let text = ''
          array.forEach(item => {
            /* eslint-disable */
            if (value == item.value) {
              text = item.text
            }
          })
          return text
        }
      },
      methods: {
        updateValue (value) {
          this.$emit('input', value)
          this.$emit('change', value)
        }
      }
    }
</script>
